import React from "react";
import HelloWorld from "../02.React的生命周期/HelloWorld";
// class 类组件 -1. 组件开头首字母大写 - 2.必须要继承 React.Component - 3.必须有 render函数
class App extends React.Component {
  constructor() {
    super() // 类有继承时，必须要调用
    this.state = {
      messgae: 'Hello React Class Component!',
      isShowHelloWorld: true
    }
    
  }
  // 类组件必须有 render函数
  render() {
    const {messgae, isShowHelloWorld} = this.state
    // render函数返回类型：
    // 1. 由 JSX编写的代码 被称为 React元素: JSX代码 -> babel编译 -> React.createElement -> React元素
    return (
      <div>
        <h1>{messgae}</h1>
        <button onClick={e=> this.setState({isShowHelloWorld: !isShowHelloWorld})}>卸载/挂载HelloWorld组件</button>
        {isShowHelloWorld && <HelloWorld />}
      </div>)
    // 2.返回数组 / fragments： 
    // 数组
    // return [<h1>{ messgae}</h1>, <h2>哈哈哈</h2>]
    // fragment： react文档->高阶指引中(未总结)
    // 3.Portals：可以渲染子节点到不同的DOM子树中。 (未总结)
    // 4.字符串/数组类型：->页面呈现->渲染到根节点(#root)未带html标签的字符串
    // return [1,2,3]
    // 5.布尔类型/null：页面不呈现任何东西
    // return null
  }
}

export default App